<script setup lang="ts" name="MenuDetail">
import { MENU_TYPE_COLUMN, MENU_TYPE_ENUM } from "@/views/system/menu/const";
import { getMenuApi, listMenuApi } from "@/api/system/menu";

const { proxy } = getCurrentInstance();

const { sys_is_not, sys_show_hide, sys_normal_disable } = useDict("sys_is_not", "sys_show_hide", "sys_normal_disable")

const emit = defineEmits(['closeDialog']);

const props = defineProps({
  id: {
    default: null,
  },
  title: {
    type: String,
    default: false,
  }
})
const open = ref(false);

const form = ref<MenuRecord>({});

const menuMap = ref({});

/** 获取菜单管理详情 */
function getData() {
  if (props.id || props.id === 0) {
    getMenuApi(props.id).then(response => {
      form.value = response.data;
      open.value = true;
    }).catch(() => {
      closeDialog(false);
    })
  } else {
    open.value = true;
  }
}


/** 获取菜单列表 */
function getMenuList() {
  listMenuApi().then(response => {
    response.data.forEach(item => {
      menuMap.value[item.menuId] = item.menuName;
    })
  });
}


/** 关闭弹窗 */
function closeDialog(refresh: boolean) {
  open.value = false;
  emit("closeDialog", refresh);
}

watch(open, (val) => {
  if (!val) {
    closeDialog(false);
  }
})

getData();
getMenuList();
</script>

<template>
  <!-- 菜单管理详情对话框 -->
  <el-dialog :title="title" v-model="open" width="700px" append-to-body>
    <div class="detail-form">
      <el-form ref="menuForm" :model="form" label-width="80px">
        <el-form-item label="上级菜单" prop="parentId">
          {{ menuMap[form.parentId] }}
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <dict-tag :options="MENU_TYPE_COLUMN" :value="form.menuType" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <icon-svg :icon-name="form.icon" />
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          {{ form.menuName }}
        </el-form-item>
        <el-form-item label="显示排序" prop="orderNum">
          {{ form.orderNum }}
        </el-form-item>
        <el-form-item label="是否外链" prop="isFrame" v-if="form.menuType != MENU_TYPE_ENUM.button">
          <dict-tag :options="sys_is_not" :value="form.isFrame" />
        </el-form-item>
        <el-form-item label="路由地址" prop="path" v-if="form.menuType != MENU_TYPE_ENUM.button">
          {{ form.path }}
        </el-form-item>
        <el-form-item label="组件路径" prop="component" v-if="form.menuType == MENU_TYPE_ENUM.menu">
          {{ form.component }}
        </el-form-item>
        <el-form-item label="权限字符" prop="perms" v-if="form.menuType != MENU_TYPE_ENUM.folder">
          {{ form.perms }}
        </el-form-item>
        <el-form-item label=" 路由参数" prop="query" v-if="form.menuType == MENU_TYPE_ENUM.menu">
          {{ form.query }}
        </el-form-item>
        <el-form-item label=" 是否缓存" prop="isCache" v-if="form.menuType == MENU_TYPE_ENUM.menu">
          {{ form.isCache }}
        </el-form-item>
        <el-form-item label="显示状态" prop="visible" v-if="form.menuType != MENU_TYPE_ENUM.button">
          <dict-tag :options="sys_show_hide" :value="form.visible" />
        </el-form-item>
        <el-form-item label="菜单状态" prop="status" v-if="form.menuType != MENU_TYPE_ENUM.button">
          <dict-tag :options="sys_normal_disable" :value="form.status"/>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          {{ form.createTime }}
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>